<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				margin: 0;
				padding: 0;
				line-height: 20px;
			}

			li {
				line-height: 24px;
				padding: 5px 0;
			}

			em {
				color: #D00;
				text-decoration: underline;
			}

			.div-list {
				display: flex;
			}

			.div-list>div {
				width: 100px;
				margin: 0 2px;
				border: 1px solid #ddd;
				text-align: center;
				cursor: pointer;
			}

			.div-list>div.active {
				background-color: #d00;
				color: #fff;
			}

			.li19 {
				position: relative;
				border: 1px solid #ddd;
				height: 60px;
				padding: 0 0 0 150px;
				color: #444;
				line-height: 20px;
			}

			i {
				font-size: 13px;
				line-height: 16px;
				display: block;
			}

			.li19>div {
				position: absolute;
				top: 10px;
				left: 0;
				width: 100px;
				height: 40px;
				line-height: 40px;
				border-radius: 30px;
				border: 1px solid #d00;
				text-align: center;
				background-color: rgba(200, 0, 0, .8);
				color: #fff;
				cursor: pointer;
			}

			.li23>div {
				vertical-align: middle;
				display: flex;
			}

			.li23>div>div {
				border: 1px solid #aaa;
				margin: 2px;
				padding: 10px;
			}

			.li23>div>div:nth-of-type(1),
			.li23>div>div:nth-of-type(4) {
				text-align: center;
				writing-mode: tb;
				/* 文字竖排 */
			}

			.li23>div>div:nth-of-type(2) {
				margin-right: 20px;
			}

			.li23>div>div:nth-of-type(3) {}

			.li23>div>div span {
				display: inline-block;
				width: 60px;
				height: 60px;
				line-height: 60px;
				border: 1px solid #d00;
				border-radius: 80%;
				text-align: center;
				margin: 0 2px;
				cursor: pointer;
			}

			[name=email],
			[name=msg] {
				width: 300px;
				padding: 4px;
				font-size: 16px;
			}

			#messages a {
				margin-left: 20px;
			}

			#code-span {
				padding: 4px 10px;
				margin: 0 10px;
				border: 1px solid #ccc;
				font-size: 16px;
				background-color: #FEAA34;
				color: #fff;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<h1 id="h1">2022-07-02 月考</h1>
		<ol>
			<li>【15分】加载时给所有的&lt;button&gt;添加id属性，属性值依次为btn1,btn2...依次类推，所有按钮的innerHTML前也加上【#btn1】,【#btn2】...依次类推</li>
			<li>【15分】
				<i>ht1阿上4の6f7g89h0</i>
				<button>点击按钮将前面i中的所有的数字挑选出来，显示到按钮上(即467890)</button>
			</li>
			<li>【10分】
				<i>
					<strong>子元素判断</strong><br />
					1.给这行li中的所有的button添加click事件<br />
					2.点击按钮提示`我是这行的第几个按钮，我前面还有几个按钮，我后面还是几个按钮，我是这行的第几个元素，我前面还有几个元素，我后面还有几个元素`<br />
					3.`我`用按钮的文字代替，`几`为具体的第几个，从1开始。
				</i>
				<button>唐僧</button><span>唐玄奘</span>
				<button>孙悟空</button><span>孙行者</span>
				<button>猪八戒</button><span>猪悟能</span>
				<button>沙和尚</button><span>沙悟净</span>
			</li>
			<li>【10分】
				<i>
					<b>选项卡效果</b>：<br />
					点哪div,哪个div添加active类样式，其它div删除active类样式
				</i>
				<div class="div-list">
					<div class="active">首页</div>
					<div>新闻</div>
					<div>我的</div>
				</div>

			</li>
			<li>【5分】<a href="javascript:void(0)">删除：弹出确认框`你确定要删除吗`,如果确定，则删除所在的`li`标签</a></li>
			<li>【15分】
				<i><strong>表单验证</strong> <br />
					1.标题非空 <br />
					2.日期格式必须是：yyyy-mm-dd <br />
					3.类别必须选择 <br />
					4.不符合要求给出alert提示，不提交表单</i>
				<form name="form-insert">
					<input placeholder="图书标题，非空" name="title" />
					<input placeholder="出版日期,格式：yyyy-mm-dd" name="pubDate" />
					<select name="type">
						<option value="0">请选择图书类别</option>
						<option value="1">国学</option>
						<option value="1">武侠</option>
						<option value="2">言情</option>
					</select>
					<button type="submit">提交保存</button>
				</form>
			</li>
			<li>【15分】
				<i>
					<strong>模拟验证码</strong><br />
					1.点击#code-span标签实现获取和更换验证码，显示在#code-span标签上<br />
					2.#code文本框失去焦点（blur事件）时，验证验证码是否正确，使用alert给出提示
				</i>
				<input placeholder="输入验证码" type="text" id="code" /><span id="code-span">获取验证码</span>
			</li>
			<li>【15分】
				<i>
					<strong>年月日联动</strong><br />
					1.加载时向`年`的下拉框添加1980-2010的年份,向`月`的下拉框添加1-12月份<br />
					2.当选择月份时，向`日`的下拉框添加对应的日期数，需要考虑闰年的2月份29天情况<br />
					3.判断闰年的条件为：if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){}
				</i>
				<select name="year">
					<option value="0">请选择年份</option>
				</select>
				<select name="month">
					<option value="0">请选择月份</option>
				</select>
				<select name="day">
					<option value="0">请选择日期</option>
				</select>
			</li>
		</ol>
	</body>

	<script src="js/jquery-3.2.1.min.js"></script>
	<script>
		$(function() {
			//第一题
			var index = 0;
			$('button').each(function() {
				$(this).attr('id', 'btn' + (++index));
				$(this).html('[#btn' + index + ']' + $(this).html());
			})

			//第二题
			$('ol').on('click', '#btn1', function() {
				var text = $(this).siblings().html()
				var a = parseInt(text.replace(/[^0-9]/ig, ""));
				$(this).text(a);
			})

			//第三题
			$(`ol>li:nth-child(3)`).on('click', 'button', function() {
				var Forward = parseInt($(this).prevAll('button').length);
				var Back = parseInt($(this).nextAll('button').length);
				var ForwardAttr = parseInt($(this).prevAll().length);
				var BackAttr = parseInt($(this).nextAll().length);
				var me = $(this).text();
				alert(me + '是第' + (Forward + 1) + '个按钮，' + me + '前面还有' + Forward + '个按钮,后面还有' + Back +
					'个按钮,' + me +
					'是这行的第' + (ForwardAttr + 1) + '个元素,' + me + '前面还有' + ForwardAttr + '个元素,' + me +
					'后面还有' +
					BackAttr + '个元素');
			})






			//第四题
			$('.div-list').on('click', 'div', function() {
				$('div').removeClass('active');
				if ($(this).hasClass('active') == false) {
					$(this).addClass('active');
				}
			})





			//第五题
			$('a').on('click', function() {
				if (!confirm('您确定要删除吗?'))
					return;

				$(this).parent().remove();
			})


			//第六题
			$('form').on('click', '#btn6', function() {
				if ($(`input[name="title"]`).val() == "") {
					alert('标题不能为空~~');
					return false;
				}
				var Regdate = /^[0-9]{4}-[0-1]?[0-9]{1}-[0-3]?[0-9]{1}$/;
				var date = $(`input[name="pubDate"]`).val();
				if (Regdate.test(date) == false) {
					alert('日期格式不正确~~~');
					return false;
				}

				var value = $('option:selected').val();
				if (value == 0) {
					alert('请选择图书类别')
					return false;
				}
				return true;
			})

			//第七题
			$('#code-span').on('click', function() {
				var str = "";
				for (var i = 0; i < 6; i++) {
					str += parseInt(Math.random() * 10);
				}
				$('#code-span').text(str);
			})

			$('#code').blur(function() {
				if ($('#code-span').text() != $('#code').val()) {
					alert('验证码输入错误~~');
				}
			})

			


		})
		
		
		$(function(){
			
			
			//第八题
			for (var i = 1980; i <= 2010; i++) {
				$(`[name="year"]`).append(`<option value=${i}>${i}</option>`);
			}
			for (var i = 1; i <= 12; i++) {
				$(`[name="month"]`).append(`<option value=${i}>${i}</option>`);
			}
				
				var day =$(`[name="day"] option`).val();
				var year;
				var month;
				$(`[name="year"]`).on('change',function(){
					 year = $(`[name="year"] option:selected`).val();
					 parseInt(year);
				})
				
				$(`[name="month"]`).on('change',function(){
				 month = $(`[name="month"] option:selected`).val();
				 parseInt(month);
				})
			if (month == 2) {
				if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
					day = 29;		
				} else {
					day = 28;
				}
			}
			if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					day=31;
			}
			if ( month == 4 || month == 6 || month == 9 || month == 11 ) {
					day=30;
			}
			for (var i=1; i <=day; i++) {
				$(`[name="day"]`).append(`<option value='${i}'>${i}</option>`);
			}
			
			
		})
	</script>
</html>
